/** * @desc: 公共查询表格组件封装 * @author zhangqiang * @date 2022/1/25 */
<!-- 使用详情 配置项里可以传函数
   table_config_left: {
        thead: [
            { label: "出/入境", prop: "jtgjbs", type: "", width: "" },
            { label: "航班", prop: "hkgsmc", type: "", width: "" },
            { label: "状态", prop: "crmc", type: "", width: "" },
            {
                label: "阅读情况", prop: "ydbs", type: "function", width: 100, callback: (row) => {
                    let text = {
                        '0': '未读',
                        '1': '已读',
                    };
                    return text[row.ydbs];
                }
            },
            // {
            //     label: "操作",
            //     prop: "operation",
            //     // 当前列的类型，不填为直接渲染文本，function 为调用回调函数，operation 为操作按钮，image 为显示图片
            //     type: "operation",
            //     width: "",
            //     // 按钮的风格，为 true 则显示自定义图标，为 false 显示 按钮样式
            //     icon: true,
            //     // 自己定义图标的 class，图标做成 背景图传入
            //     // 自定义图标的样式写在了 src/assets/scss/global.scss 中，根据项目需求自己定义
            //     class:[]
            //     // 如果有其他类型的按钮，可以自己定义插槽模板，将名字写到该处即可显示在页面
            //     slotName: "",
            // },
        ],
        // 行的点击事件
        rowClick:true,
        rowClassName:"",//是否需要行点击样式 传自定义样式名
        // 列表前面是否需要显示 checkbox 框，如要显示 值写成 true
        checkbox: false,
        // 请求表格数据的 url ，可直接传入
        url: "jtgjjl/table",
        // 请求表格数据的 方式
        method: "get",
    },
-->
<template>
	<div :class="`glotableTable-box ${
			table_config.rowClick ? 'table-hover' : ''
		} ${table_config.addBoderClass ? table_config.addBoderClass : ''}`">
		<div class="tableTitleBox">
			<!-- 展示title标题 -->
			<div class="global-title-box" v-if="table_config.tableTitle">
				{{ table_config.tableTitle }}
				<!-- 展示 同比占比 类别 -->
				<div class="areablock-table-tit-right" v-if="table_config.tbhbzbShow">
					<!-- 展示分类 -->
					<div class="areablock-thzBox">
						<div class="areablock-right-block">
                        <span class="areablock-right-block-item block-tb" @click="blockClick('tb')"
                              :class="[blockChecked.tbisCheck ? '' : 'nocheck']"></span>
							<span :class="[
								blockChecked.tbisCheck ? '' : 'nocheckcolor',
							]">同比</span>
						</div>
						<div class="areablock-right-block">
                        <span class="areablock-right-block-item block-hb" @click="blockClick('hb')"
                              :class="[blockChecked.hbisCheck ? '' : 'nocheck']"></span>
							<span :class="[
								blockChecked.hbisCheck ? '' : 'nocheckcolor',
							]">环比</span>
						</div>
						<div class="areablock-right-block">
                        <span class="areablock-right-block-item block-zb" @click="blockClick('zb')"
                              :class="[blockChecked.zbisCheck ? '' : 'nocheck']"></span>
							<span :class="[
								blockChecked.zbisCheck ? '' : 'nocheckcolor',
							]">占比</span>
						</div>
					</div>
				</div>
			</div>

		</div>
		<el-table  ref="globalmultipleTable" style="width: 100%" @row-click="fnRowClick"
				   stripe
		          :row-class-name="tableRowClassName" :data="table_tbody" @selection-change="handleSelectionChange"
		          :row-key="getRowKe" :height="table_config.height" @sort-change="sortChange">
			<!-- 空太页插槽展示内容 -->
			<template slot="empty">
				<div class="emptyBox">
					<img src="../assets/common/img/nodataIcon.png" alt="" />
					<!--暂无数据-->
					<div>{{this.i18n.t('No data available')}}</div>
				</div>
			</template>
			<!-- 显示复选框  -->
			<el-table-column v-if="table_data.checkbox" type="selection" width="70" :reserve-selection="true"
			                 :disabled="false"></el-table-column>
			<!-- 表格其他内容展示  -->
			<template v-for="item in table_data.thead">
				<!--  默认文本直接显示 -->
				<el-table-column v-if="!item.type" :key="item.prop" :prop="item.prop" :label="item.label" :align="item.align ? item.align : ''"
				                 show-overflow-tooltip :width="item.width" :sortable="item.sortable || false"></el-table-column>
				<!-- 序号 index -->
				<!--                <el-table-column v-else-if="item.type === 'index'"  :align="item.align ? item.align : ''" :key="item.prop + item.label" :prop="item.prop"-->
				<!--                    :label="item.label" :width="item.width" :sortable="item.sortable || false">-->
				<!--                    <template slot-scope="scope">-->
				<!--                        <div>{{ (curForm.offset - 1) * curForm.limit + scope.row[item.prop] }}</div>-->
				<!--                    </template>-->
				<!--                </el-table-column>-->
				<!-- 需要将状态码转换为文字  -->
				<el-table-column v-else-if="item.type === 'function'"  :align="item.align ? item.align : ''" :key="item.prop + item.label" :prop="item.prop"
				                 :label="item.label" :width="item.width" show-overflow-tooltip :sortable="item.sortable || false">
					<template slot-scope="scope">
						<div :class="item.class ? item.class : ''" v-if="!item.function" v-html="
								item.callback &&
								item.callback(scope.row, scope.column)
							"></div>
						<div :class="item.class ? item.class : ''" v-else @click="item.function(scope.row)" v-html="
								item.callback &&
								item.callback(scope.row, scope.column)
							"></div>
					</template>
				</el-table-column>
				<!-- 有点击事件的表格行 -->
				<el-table-column v-else-if="item.type === 'clickMethod'" :key="item.prop" :prop="item.prop"  :align="item.align ? item.align : ''"
				                 :label="item.label" :width="item.width" :sortable="item.sortable || false">
					<template slot-scope="scope">
						<a href="javascript:void(0)"
						   @click="tableImp(`${item.function}`, scope.row)">{{ scope.row[item.prop] }}</a>
					</template>
				</el-table-column>
				<!-- 判断当前的类型是不是嵌套的子级类型 -->
				<el-table-column v-else-if="item.type === 'tbhbModule'" :key="item.prop + item.label" :prop="item.prop"
				                 :label="item.label" :width="item.width" align="center" :sortable="item.sortable || false">
					<!-- 单个没有子级嵌套显示 -->
					<template slot-scope="scope" v-if="!item.children">
						<TabletbhbComponent :cRow="scope.row[item.prop]" :blockChecked="blockChecked">
						</TabletbhbComponent>
					</template>
					<!-- 子级嵌套走这里 -->
					<el-table-column v-for="(itemTbhb, i) in item.children" :align="item.align ? item.align : ''" :key="i" :label="itemTbhb.label"
					                 :prop="itemTbhb.prop" :width="itemTbhb.width"
					                 v-if="item.children && item.children.length !== 0">
						<!-- 判断有没有三级 -->
						<el-table-column v-for="(itemChildren, i) in itemTbhb.children" :key="i"
						                 :label="itemChildren.label" :prop="itemChildren.prop" :width="itemChildren.width"
						                 v-if="itemTbhb.children&&itemTbhb.children.length !== 0">
							<template slot-scope="scope">
								<!-- 需要显示同环比组件 -->
								<TabletbhbComponent :cRow="scope.row[itemChildren.prop]" :blockChecked="blockChecked"
								                    v-if="itemChildren.type=='tbhbModuleChildren'">
								</TabletbhbComponent>
								<!-- 直接显示数据 -->
								<div v-else>
									{{ scope.row[itemChildren.prop] }}
								</div>
							</template>
						</el-table-column>
						<!-- 没有嵌套的子级 就直接显示 -->
						<template slot-scope="scope" v-if="!itemTbhb.children">
							<!-- 需要显示同环比组件 -->
							<TabletbhbComponent :cRow="scope.row[itemTbhb.prop]" :blockChecked="blockChecked"
							                    v-if="itemTbhb.type=='tbhbModuleChildren'">
							</TabletbhbComponent>
							<!-- 直接显示数据 -->
							<div v-else>
								{{ scope.row[itemTbhb.prop] }}
							</div>
						</template>
					</el-table-column>
				</el-table-column>
				<!-- 图标显示  -->
				<el-table-column v-else-if="item.type === 'image'" :key="item.prop" :prop="item.prop"
				                 :label="item.label" :width="item.width || 50" :align="item.align ? item.align : ''" :sortable="item.sortable || false">
					<template slot-scope="scope">
						<!-- 此处用 img 或者 class根据项目实际情况来定  -->
						<img v-if="scope.row[item.prop]" :src="scope.row[item.prop]" class="tableimg" alt="" />
						<div v-else class="tableimg icon iconfont icon-zhanweitu"></div>
					</template>
				</el-table-column>
				<!--  如果是图片 -->
				<el-table-column v-else-if="item.type === 'img'" :key="item.prop" :prop="item.prop"
				                 :label="item.label" :width="item.width || 100" :align="item.align ? item.align : ''">
					<template slot-scope="scope">
						<!-- 此处用 img 或者 class根据项目实际情况来定  -->
						<el-popover
							v-if="scope.row[item.prop]"
							placement="right"
							:width="item.popImgWidth || 400"
							trigger="hover">
							<img :src="scope.row[item.prop]" style="width: 100%;" />
							<div slot="reference" class="baseTable-img-box">
								<img class="table-img" :src="scope.row[item.prop]" />
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<!-- 操作按钮显示  -->
				<el-table-column v-if="item.type === 'operation'" :key="item.prop" :prop="item.prop" :label="item.label"
				                 :width="item.width">
					<template slot-scope="scope">
						<div>
							<!--  显示图标样式  -->
							<div class="iconButton" v-if="item.icon">
								<!-- 遍历传递过来的class -->
								<span
									class="class-row"
									v-for="(icon, index) in item.iconClass"
									:key="index"
									:title="icon.title ? icon.title : ''"
									@click="tableEventBus(icon, scope.row, scope)"
									v-show="icon.rulus ? icon.rulus(scope.row) : true"
								>
                                    <span :class="`${icon.customIcon?icon.class:('global-icon icon iconfont '+icon.class)}
										${
											scope.row.disabled &&
											btnText === icon.title
												? 'disabled'
												: ''
										} tabIconClass`" v-power="icon.power"></span>
                                </span>

								<!-- 插槽用来显示自定义 -->
								<slot v-if="item.slotName" :name="item.slotName" :scope="scope"></slot>
							</div>
							<!-- 显示带文字按钮样式 -->
							<div class="iconButton" v-else>
                                <span v-for="(
										itemIcon, indexIcon
									) in item.default" :class="itemIcon.class" :key="indexIcon"
                                      @click="tableEventBus(itemIcon, scope.row)">{{ itemIcon.label }}</span>
								<!-- 插槽用来显示自定义 -->
								<slot v-if="item.slotName" :name="item.slotName"></slot>
							</div>
						</div>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<!-- 分页插件 -->
		<el-row class="table-bottom-box">
			<el-col>
				<div class="wrapper-page">
					<el-button size="small" type="handle" class="serachbox 88" v-for="(item, index) in table_data.tableButtonArr"
					           :key="'button-box' + index" @click="fnBtnClick(item.btnType, item.callback)" v-power="item.power">
						<i :class="item.customIcon?item.iconClass:('iconfont icon ' + item.iconClass)"></i>
						{{ item.text }}
					</el-button>
				</div>

			</el-col>
			<el-col align="right">
				<div class="paginationBox">
					<el-pagination  v-if="table_data.showPagination" background @current-change="handleCurrentChange"
					               :current-page.sync="table_data.currentPage" :page-size="table_config.pageSize" :total="total"
					               :page-sizes="[10, 20, 50, 100]"
					               :layout="layoutText" @size-change="handleSizeChange">
					</el-pagination>
				</div>
			</el-col>
		</el-row>
		<!-- 底部特类行的标识颜色颜色修改 -->
		<div class="table-bz" v-if="table_config.rowClass">
			<div class="table-textfff">注</div>
			<div v-for="(item,i) in table_config.rowClass" :key="'rowClass' + i" class="table-bz-flex">
				<div :class="'table-fk '+item.className+'-bg'" ></div>
				<div :class="'table-name '+item.className">{{item.text}}</div>
			</div>
		</div>
	</div>
</template>
<script>
import {
	get_table
} from "@/api/globaTableData";
import TabletbhbComponent from "@/components/TabletbhbComponent"; //部门树状下拉框
export default {
	components: {
		TabletbhbComponent,
	},
	data() {
		return {
			zjhm: "",
			loading: "",
			// 表格
			table_tbody: [],
			// 表头等配置数据
			table_data: {
				tableBtns: {},
				thead: [],
				checkbox: false,
				url: "",
				method: "",
				currentPage: 1,
				height: null,
				blockChecked: {},
				showPagination: true,
				clickIndex: 0, // 点击的第几行
				btnText: "",
				tableButton: false, // 表格按钮是否展示
				tableButtonArr: [], // 要展示的表格按钮
			},
			// 所有选中的tablerow数据
			checkedRows: [],
			// 总页数
			total: 0,
			curForm: {
				pageNumber: 1,
				pageSize: 10,
				// 事件类型选项
			},
			formData: {},
			activeIndex: -1,
			//显示同比 环比 占比的样式
			blockChecked: {
				tbisCheck: true,
				hbisCheck: true,
				zbisCheck: true,
			},
		};
	},
	mounted() {

	},
	props: {
		table_config: {
			type: Object,
			default: function () {
				return {};
			},
		},
		layoutText: {
			type: String,
			default: "sizes,total, prev, pager, next, jumper",
		},
	},
	methods: {
		/**
		 * @description 同比 环比 占比 点击事件
		 * @param String: {type} 传入类型
		 * @return
		 * @author xujingyue 2022-06-08 10:06:15
		 **/
		blockClick(type) {
			if (type == "tb") {
				this.blockChecked.tbisCheck = !this.blockChecked.tbisCheck;
			} else if (type == "hb") {
				this.blockChecked.hbisCheck = !this.blockChecked.hbisCheck;
			} else {
				this.blockChecked.zbisCheck = !this.blockChecked.zbisCheck;
			}
		},
		/**
		 * @description: sortable 点击事件
		 * @param Object: {}
		 * @return
		 * @date: xujingyue 2022-08-05 14:18:58
		 **/
		// 表格排序事件
		sortChange({ column, prop, order }) {
			// 触发的排序和缓存的排序相同时，取消该字段的排序
			if (!order || this.table_config.sortField[prop] === order) {
				this.table_config.sortField[prop] = null;
			} else {
				this.table_config.sortField[prop] = order;
			}
			let orderStr = "";
			for (const i in this.table_config.sortField) {
				if (this.table_config.sortField[i] == "ascending") {
					orderStr += `${i} ,`;
				} else if (this.table_config.sortField[i] == "descending") {
					orderStr += `${i} DESC,`;
				}
			}
			this.loading_data({ ...this.formData, order: orderStr });
		},
		/**
		 * @description 表格行点击事件
		 * @param String: {envName} 传入事件名
		 * @param Object: {row} 表格行数据
		 * @return
		 * @author hanzheng 2022-02-08 17:08:15
		 **/
		tableImp(envName, row) {
			this.$emit(envName, row);
		},
		/**
		 * @description 表格行内图标/按钮点击事件，取当前按钮的 类型 + Data 方式进行函数定义
		 * @param Object: {iconobj} 触发事件名
		 * @property {String}   [type]    事件类型
		 * @property {String}   [class]   图标类名
		 * @param {String}： {callback} 回调事件名，如果有则回调事件
		 *
		 * @param Object: {row} 表格行数据
		 * @return
		 * @author hanzheng 2022-02-08 17:08:15
		 **/
		tableEventBus(iconobj, row) {
			if (iconobj.callback) {
				this.$emit(iconobj.callback, JSON.parse(JSON.stringify(row)));
			}
		},
		/**
		 * @description 确定表格行的 key取值，优化代码渲染
		 * @param Object: {row} 表格行数据
		 * @return
		 * @author hanzheng 2022-02-08 17:10:55
		 **/
		getRowKe(row) {
			return row.jh || row.sbbh || row.xjbh || row.id;
		},
		/**
		 * @description 遍历深度存储prop传入数据
		 * @param
		 * @return
		 * @author hanzheng 2022-02-08 17:11:31
		 **/
		init_data() {
			// 遍历数据，当 key 在表格中存在才替换
			for (let i in this.table_config) {
				if (Object.keys(this.table_data).includes(i)) {
					this.table_data[i] = this.table_config[i];
				}
			}
		},
		/**
		 * @description 请求表格数据
		 * @param Object: {form} 按搜索条件传入
		 * @return
		 * @author hanzheng 2022-02-08 17:11:54
		 **/
		loading_data(form = {}, val = 1) {
			// val值为0代表参数不变，刷新表格当前页面
			if (val == 0) {
				form = this.formData;
				val = this.curForm.pageNumber;
			}
			// globalLoading()
			this.init_data();
			// 将查询里面数据存起来 后面分页要用
			this.curForm.pageNumber = val;
			this.table_data.currentPage = val;
			// 当传入的配置项没有 url 并且有 table_tbody 时，进行假数据存储
			if (this.table_data.url == "" && this.table_config.table_tbody) {
				this.table_tbody = this.table_config.table_tbody;
				return;
			}
			this.formData = JSON.parse(JSON.stringify(form));
			let curForm = Object.assign(form, this.curForm);
			let data = {
				url: this.table_data.url,
				form: curForm,
				method: this.table_data.method,
			};
			// this.$store.commit("setTableDataFlag", false);
			if(this.loading){
                this.loading.close(); //关闭loading效果
            }
			this.loading = this.G.globalLoading(); //初始化loading效果
			this.table_tbody = [];
			// 请求表格数据
			get_table(data)
				.then((res) => {
					this.loading.close(); //关闭loading效果
					if (res.code == 200) {
						if(res.data instanceof Array){
							this.table_tbody = res.data
							this.total=res.data.length
						}else{
							this.table_tbody = res.data.values
							this.total=res.data.totalCount
						}
						// if (!(this.table_tbody instanceof Array)) {
						// 	if (!this.table_tbody?.values) {
						// 		this.table_tbody = [];
						// 	}
						// }

						// this.total = res.data?.totalCount || 0;
						// 表格数据刷新时清空表格选中项
						if (this.table_data.checkbox) {
							this.clearSelection();
						}
						this.$emit("tableOnload", JSON.parse(JSON.stringify(this.table_tbody)));
					} else {
						this.$emit("tableOnload", []);
						this.W.$tips( 'warning', '表格数据加载失败,请重试');
					}
					// this.$store.commit("setTableDataFlag", true);
				})
				.catch((err) => {
					this.loading.close(); //关闭loading效果
					// this.$store.commit("setTableDataFlag", true);
					console.log(err);
				});
		},
		/**
		 * @description 多选行数据发生改变事件
		 * @param Number: {val} 选择行
		 * @return
		 * @author hanzheng 2022-02-08 17:13:49
		 **/
		handleSelectionChange(val) {
			this.checkedRows = val;
			this.$emit("handleSelectionChange", this.checkedRows);
		},
		/**
		 * @description 清空表格选中项事件
		 * @param
		 * @return
		 * @author hanzheng 2022-02-08 17:17:00
		 **/
		clearSelection() {
			this.handleSelectionChange([]);
			this.$refs.globalmultipleTable.clearSelection();
		},
		/**
		 * @description 清空表格选中项事件
		 * @param Numebr: {val} 选择每页显示条数
		 * @return
		 * @author hanzheng 2022-02-08 17:17:00
		 **/
		handleSizeChange(val) {
			this.curForm.pageSize = val;
			this.$emit('selectPage',val)
			this.loading_data(this.formData, this.curForm.pageNumber);

		},
		/**
		 * @description 点击切换页码
		 * @param Numebr: {val} 显示第几页
		 * @return
		 * @author hanzheng 2022-02-08 17:17:00
		 **/
		handleCurrentChange(val) {
			this.curForm.pageNumber = val;
			this.loading_data(this.formData, val);
		},
		/**
		 * @description 表格的行的点击事件
		 * @param Object: {row} 当前行数据
		 * @return
		 * @author hanzheng 2022-02-08 17:17:00
		 **/
		fnRowClick(row) {
			if (
				this.table_config.rowClassName &&
				this.table_config.rowClassName != ""
			) {
				if (this.activeIndex == row.row_index) {
					this.activeIndex = -1;
				} else {
					this.activeIndex = row.row_index;
				}
			}
			if (this.table_config.rowClick) {
				this.$emit("rowClick", row);
			}
		},
		/**
		 * @description 行点击样式
		 * @param Object: {row} 当前行数据
		 * @param Number: {rowIndex} 当前行下标
		 * @return
		 * @author hanzheng 2022-02-08 17:17:00
		 **/
		tableRowClassName({
			                  row,
			                  rowIndex
		                  }) {
			row.row_index = rowIndex;
			if (
				this.table_config.rowClassName &&
				this.table_config.rowClassName != "" &&
				this.activeIndex == rowIndex
			) {
				return this.table_config.rowClassName;
			}
			// if (
			//     (this.table_config.rowWfwgClass && row.wfwglk) ||
			//     (this.table_config.rowWfwgClass && row.hbjcbz) ||
			//     (this.table_config.rowWfwgClass && row.sfzdgj)
			// ) {
			//     return this.table_config.rowWfwgClass;
			// }

			if(this.table_config.rowClass){
				let className = ''
				//判断当前行是否等于标识的字段
				this.table_config.rowClass.forEach(element => {
					if(row[element.bszd]&&element.value==row[element.bszd]){
						className += (element.className + ' ')
					}

				});
				return className
			}
		},
		/**
		 * @description 表格操作栏
		 * @param
		 * @return
		 * @author hanzheng 2022-02-08 17:21:19
		 **/
		fnBtnClick(index, callback) {
			switch (index) {
				case 0:
					if (callback) {
						this.$emit(callback);
					}
					break;
				case 1:
					this.$emit(callback ? callback : "addTableData");
					break;
				case 2:
					this.$emit(callback ? callback : "exportTableData");
					break;
				// 删除需要将id传过去
				case 3:
					this.$emit(
						callback ? callback : "delTableData",
						this.checkedRows
					);
					break;
			}
		},
	},
};
</script>

<style lang="scss">
.table-bz {
	display: flex;
	margin-top: 15px;
	align-items: center;

	.table-textfff {
		margin-right: 15px;
		margin-left: 30px;
	}

	.table-bz-flex {
		display: flex;
	}

	.table-fk {
		width: 16px;
		height: 16px;
		margin-right: 15px;
		margin-left: 15px;
	}

	.table-name {
		line-height: 16px;
	}

}
/* 操作按钮最后一个没有右边距 */
.table-hover {
	tr.el-table__row {
		cursor: pointer;
	}

	.iconButton {
		display: flex;
	}
}

// 给table添加title 样式说明
.tableTitleBox {
	// width: 100%;
	// margin-bottom: 7px;
	// display: flex;
	// justify-content: space-between;
	.global-title-box{
		padding: 24px;
		font-size: 20px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: left;
		&::before{
			content: '';
			width: 4px;
			height: 15.93px;
			opacity: 1;
			background: rgba(55, 101, 215, 1);
			margin-right: 10px;
		}
	}

	.areablock-table-tit-right {
		height: 56px;
		padding-right: 20px;
		display: flex;
		justify-content: flex-end;

		.areablock-thzBox {
			height: 56px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.areablock-right-block {
			min-width: 56px;
			margin-right: 15px;

			span {
				font-weight: normal;
				font-size: 16px;
			}
		}

		.areablock-right-block-item {
			width: 16px;
			height: 16px;
			display: inline-block;
			margin-right: 10px;
		}

		.areablock-right-block {
			display: flex;
			align-items: center;
			cursor: pointer;
		}

		.block-tb {
			background-color: $--color-pagingJump-color;
		}

		.block-hb {
			background-color: #fab75d;
		}

		.block-zb {
			background-color: #29adf6;
		}

		.nocheck {
			background-color: #d6d6d6 !important;
		}

		.nocheckcolor {
			color: #d6d6d6 !important;
		}
	}
}

// 同比环比表格样式的添加
.addBoderClass {

	.el-table--border td,
	.el-table--border th,
	.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
		border-right: 1px solid #ebeef5 !important;
	}

	.el-table--border th,
	.el-table__fixed-right-patch {
		border-bottom: 1px solid #ebeef5 !important;
		background-color: var(--tableRow-bg) !important;
	}
}

.iconButton {
	display: flex;
	>span {
		cursor: pointer;
	}

	.class-row {
		margin-right: 5px;
		cursor: pointer;
	}
}
.tableimg{
	width: 40px;
	height: 40px;
	vertical-align: middle;
}
.iconzhanweitu:before {
	content: "\e6c1";
	font-size: 40px;
	margin-top: 20px;
	color: #CED7F1;
	vertical-align: -webkit-baseline-middle;
}
</style>
